<template>
    <div class="songlistres">
        <div v-if="info.songlists.length != 0">
            <div class="count">
                <span>找到{{ info.songlistCount }}个歌单</span>
            </div>
            <div class="list">
                <div class="item" v-for="(item, index) in info.songlists" :key="index">
                    <SongList :item="item"></SongList>
                </div>
            </div>
            <Pagination :total="info.songlistCount" :current-page="info.currentPage" :page-size="30"
                @handleCurrentChange="getSearchSongListBy"></Pagination>
        </div>

        <div class="no" v-else>
            <el-empty description="数据正在加载~" :image-size="200"></el-empty>
        </div>
    </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { reactive, onMounted } from 'vue'
import { getSearchSongList } from '@/api/searchdetail/searchdetail.js'
import Pagination from '../../../components/content/Pagination.vue'
import SongList from '../../../components/content/songlist/SongList.vue'
const route = useRoute()
const info = reactive({
    keyword: '',
    songlists: [],
    songlistCount: 0,
    currentPage: 1,
})

//获取歌单数据
async function getSearchSongListBy(page = 1) {
    info.currentPage = page
    let offset = (page - 1) * 30
    let res = await getSearchSongList(info.keyword, offset)
    if (res.data.code == 200) {
        info.songlistCount = res.data.result.playlistCount
        info.songlists = res.data.result.playlists
    }
}

onMounted(() => {
    info.keyword = route.params.keywords
    getSearchSongListBy()
})
</script>

<style lang="scss" scoped>
.songlistres {
    position: relative;

    .count {
        position: absolute;
        top: -30px;
        right: 120px;
        font-size: 14px;
        color: #c0bebe;
    }

    .list {
        display: flex;
        flex-wrap: wrap;

        .item {
            margin-right: 20px;
            margin-bottom: 20px;
        }
    }

    .no {
        width: 100%;
        text-align: center;
        font-size: 24px;
        font-weight: 700;
    }
}</style>